<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>/Echoes/visualization/GetDateRange</title>
<link type="text/css" rel="stylesheet" href="/Echoes/static/textarea/SyntaxHighlighter.css"></link>
<style>
div.fluid { width: 93% !important; }
 div.fixed { width: 800px !important; }
* { margin: 0em; padding: 0em; }
 body { background-color: #fff; color: #585858; font-size: 10pt; font-family: georgia, serif; }
 h1,h2,h3,h4,h5,h6 { font-weight: normal; letter-spacing: -1px; }
 h2,h3,h4,h5,h6 { color: #185360; }
 br.clear { clear: both; }
 img { padding: 3px; border: solid 1px #e1e1e1; }
 img.icon { border: 0px; vertical-align: middle; }
 img.floatTL { float: left; margin-right: 1.5em; margin-bottom: 1.5em; margin-top: 0.5em; }
 a { text-decoration: none; color: #FF5C1F; }
 a:hover { text-decoration: underline; }
 textarea { font-family: courier; }
 ul { margin-left: 1.5em; }
 li { line-height: 1.5em; }
 dd { text-decoration: bold; }
 dt { text-decoration:none; margine-left: +10em; }
 p { line-height: 1.8em; }
 table, tr, td { text-align: left; vertical-align: top; }
 #header { width:100%; height:48px; background: #195866 url('/Echoes/static/title.png') repeat-x; }
 #header_inner { position: relative; width: 800px; height:36px; margin: 0 auto; }
 #header_lite { width:100%; height:36px; background: #440000 url('/Echoes/static/title.png') repeat-x; }
 #header_inner_lite { position: relative; width: 800px; height: 36px; margin: 0 auto; }
 /* Logo */
 #logo { position: absolute; bottom: 0.6em; }
 #logo h1 { display: inline; color: #fff; font-size: 1.8em; }
 #logo h2 { display: inline; color: #fff; font-size: 1.8em; }
 /* Menu */
 #menu { position: absolute; right: 0em; bottom: 0em; }
 #menu ul { list-style: none; }
 #menu li { float: left; }
 #menu li a { margin-left: 0.5em; display: block; padding: 0.5em 0.5em 0.5em 0.5em; background: #fff repeat-x; color: #185360; font-weight: bold; font-size: 1.0em; text-decoration: none;}
// #menu li a.inactive { background: #FF6C1F repeat-x; color: #fff; border: solid 1px #DB7623; border-top: solid 1px #FBA653; }
#menu li a.inactive { background: transparent; color: #FF5C1F; border: solid 0px #185360; border-top: solid 0px #185360; }
 /* Main */
 #main { background: #fff 0px 1px repeat-x; }
 #main_inner p { text-align: justify; margin-bottom: 2.0em; }
 #main_inner ul { margin-bottom: 2.0em; }
 #main_inner { position: relative; width: 800px; margin: 0 auto; padding-top: 1.0em; }
 #main_inner h1 { border-bottom: dotted 1px #E1E1E1; position: relative; font-size: 2.1em; padding-bottom: 0.1em; margin-bottom: 0.8em; }
 #main_inner .post { position: relative; }
 #main_inner .post h3 { position: relative; font-size: 1.7em; padding-bottom: 1.2em; }
 #main_inner .post ul.post_info { list-style: none; position: absolute; top: 3em; font-size: 0.8em; }
 #main_inner .post ul.post_info li { background-position: 0em 0.2em; background-repeat: no-repeat; display: inline; padding-left: 18px; }
 /* Flash */
 #flash { width: 600px; margin: 0 auto; text-align: center; clear: both; border: 1px #000000; background-color: #FF5C1F; color: white; margin-top: 0.0em; margin-bottom: 1.0em; padding-top: 1.0em; padding-bottom: 1.0em; }
 /* Footer */
 #footer { width: 800px; margin: 0 auto; text-align: center; clear: both; border-top: dotted 1px #E1E1E1; margin-top: 1.0em; margin-bottom: 1.5em; padding-top: 1.0em; }
 /* Search */
 input.button { background: #FF6C1F repeat-x; color: #fff; border: solid 1px #DB7623; font-weight: bold; font-size: 0.8em; height: 2.0em; }
 input.text { border: solid 1px #F1F1F1; font-size: 1.0em; padding: 0.25em 0.25em 0.25em 0.25em; }
 /* LAYOUT - 3 COLUMNS */
 /* Primary content */
 #primaryContent_3columns { position: relative; margin-right: 34em; }
 #columnA_3columns { position: relative; float: left; width: 100%; margin-right: -34em; padding-right: 2em; }
 /* Secondary Content */
 #secondaryContent_3columns { float: right; }
 #columnB_3columns { width: 13.0em; float: left; padding: 0em 2em 0.5em 2em; border-left: dotted 1px #E1E1E1; }
 #columnC_3columns { width: 13.0em; float: left; padding: 0em 0em 0.5em 2em; border-left: dotted 1px #E1E1E1; }
 /* LAYOUT - 2 COLUMNS */
 /* Primary content */
 #primaryContent_2columns { position: relative; margin-right: 17em; }
 #columnA_2columns { position: relative; float: left; width: 100%; margin-right: -17em; padding-right: 2em; }
 /* Secondary Content */
 #secondaryContent_2columns { float: right; }
 #columnC_2columns { width: 13.0em; float: left; padding: 0em 0em 0.5em 2em; border-left: dotted 1px #E1E1E1; }
 /* LAYOUT - COLUMNLESS */
 /* Primary content */
 #primaryContent_columnless { position: relative; }
 #columnA_columnless { position: relative; width: 100%; }
</style>
<script type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=400,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
function collapse(name) { if
(this.document.getElementById(name).style.display=="none")
(this.document.getElementById(name).style.display="block") ;
else (this.document.getElementById(name).style.display="none") ; }
//-->
</script>
</head>
<body>
<div id="header">
 <div id="header_inner" class="fixed">
   <div id="logo">
     <h1><a href="">[Gluon]</a></h1>
     <h2>Echoes</h2>
   </div>

  </div>
</div>
<div id="main">
  <div id="main_inner" class="fixed">
    <div id="primaryContent_columnless">
      <div id="columnA_columnless">

        <div id="flash">form is invalid!</div>


<script language=JavaScript>

var datePickerDivID = "datepicker";
var iFrameDivID = "datepickeriframe";

var dayArrayShort =
   new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa');
var dayArrayMed =
   new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var dayArrayLong =
   new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday',
             'Thursday', 'Friday', 'Saturday');
var monthArrayShort =
   new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
             'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var monthArrayMed =
   new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June',
             'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
var monthArrayLong =
   new Array('January', 'February', 'March', 'April', 'May', 'June',
             'July', 'August', 'September', 'October', 'November', 'December');

// these variables define the date formatting we're expecting and outputting'.
// If you want to use a different format by default, change the defaultDateSeparator
// and defaultDateFormat variables either here or on your HTML page.
var defaultDateSeparator = "/";        // common values would be "/" or "."
var defaultDateFormat = "mdy"    // valid values are "mdy", "dmy", and "ymd"
var dateSeparator = defaultDateSeparator;
var dateFormat = defaultDateFormat;

function displayDatePicker(dateFieldName, displayBelowThisObject, dtFormat, dtSep) {
  var targetDateField = document.getElementsByName (dateFieldName).item(0);

  if (!displayBelowThisObject) displayBelowThisObject = targetDateField;

  // If a date separator character was given, update the dateSeparator variable
  if (dtSep) dateSeparator = dtSep;
  else dateSeparator = defaultDateSeparator;

  // Ff a date format was given, update the dateFormat variable
  if (dtFormat) dateFormat = dtFormat;
  else dateFormat = defaultDateFormat;

  var x = displayBelowThisObject.offsetLeft;
  var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;

  // Deal with elements inside tables and such
  var parent = displayBelowThisObject;
  while (parent.offsetParent) {
    parent = parent.offsetParent;
    x += parent.offsetLeft;
    y += parent.offsetTop ;
  }

  drawDatePicker(targetDateField, x, y);
}

function drawDatePicker(targetDateField, x, y) {
  var dt = getFieldDate(targetDateField.value );

  if (!document.getElementById(datePickerDivID)) {
    var newNode = document.createElement("div");
    newNode.setAttribute("id", datePickerDivID);
    newNode.setAttribute("class", "dpDiv");
    newNode.setAttribute("style", "visibility: hidden;");
    document.body.appendChild(newNode);
  }

  // Move the datepicker div to the proper x,y coordinate and toggle the visiblity
  var pickerDiv = document.getElementById(datePickerDivID);
  pickerDiv.style.position = "absolute";
  pickerDiv.style.left = x + "px";
  pickerDiv.style.top = y + "px";
  pickerDiv.style.visibility =
      (pickerDiv.style.visibility == "visible" ? "hidden" : "visible");
  pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" : "block");
  pickerDiv.style.zIndex = 10000;

  // Draw the datepicker table
  refreshDatePicker(targetDateField.name, dt.getFullYear(), dt.getMonth(), dt.getDate());
}

function refreshDatePicker(dateFieldName, year, month, day) {
  // If no arguments are passed, use today's date; otherwise, month and year'
  // are required (if a day is passed, it will be highlighted later)
  var thisDay = new Date();

  if ((month >= 0) && (year > 0))
    thisDay = new Date(year, month, 1);
  else {
    day = thisDay.getDate();
    thisDay.setDate(1);
  }

  // The calendar will be drawn as a table
  // you can customize the table elements with a global CSS style sheet,
  // or by hardcoding style and formatting elements below
  var crlf = "
";
  var TABLE = "<table cols=7 class='dpTable'>" + crlf;
  var xTABLE = "</table>" + crlf;
  var TR = "<tr class='dpTR'>";
  var TR_title = "<tr class='dpTitleTR'>";
  var TR_days = "<tr class='dpDayTR'>";
  var TR_todaybutton = "<tr class='dpTodayButtonTR'>";
  var xTR = "</tr>" + crlf;
  var TD =
   "<td class='dpTD' onMouseOut='this.className="dpTD";' onMouseOver=' this.className="dpTDHover";' ";
  var TD_title = "<td colspan=5 class='dpTitleTD'>";
  var TD_buttons = "<td class='dpButtonTD'>";
  var TD_todaybutton = "<td colspan=7 class='dpTodayButtonTD'>";
  var TD_days = "<td class='dpDayTD'>";
  var TD_selected =
   "<td class='dpDayHighlightTD' onMouseOut='this.className="dpDayHighlightTD";' onMouseOver='this.className="dpTDHover";' ";
  var xTD = "</td>" + crlf;
  var DIV_title = "<div class='dpTitleText'>";
  var DIV_selected = "<div class='dpDayHighlight'>";
  var xDIV = "</div>";

  // Start generating the code for the calendar table
  var html = TABLE;

  // This is the title bar, which displays the month and the buttons to
  // go back to a previous month or forward to the next month
  html += TR_title;
  html += TD_buttons + getButtonCode(dateFieldName, thisDay, -1, "&lt;") + xTD;
  html += TD_title + DIV_title + monthArrayLong[ thisDay.getMonth()] + " " +
          thisDay.getFullYear() + xDIV + xTD;
  html += TD_buttons + getButtonCode(dateFieldName, thisDay, 1, "&gt;") + xTD;
  html += xTR;

  // This is the row that indicates which day of the week we're on'
  html += TR_days;
  for(i = 0; i < dayArrayShort.length; i++)
    html += TD_days + dayArrayShort[i] + xTD;
  html += xTR;

  // Now we'll start populating the table with days of the month'
  html += TR;

  // First, the leading blanks
  for (i = 0; i < thisDay.getDay(); i++)
    html += TD + "&nbsp;" + xTD;

  // Now, the days of the month
  do {
    dayNum = thisDay.getDate();
    TD_onclick =
      " onclick="updateDateField('" + dateFieldName + "', '" + getDateString(thisDay) + "');">";

    if (dayNum == day)
      html += TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD;
    else
      html += TD + TD_onclick + dayNum + xTD;

    // If this is a Saturday, start a new row
    if (thisDay.getDay() == 6)
      html += xTR + TR;

    // Increment the day
    thisDay.setDate(thisDay.getDate() + 1);
  } while (thisDay.getDate() > 1)

  // Fill in any trailing blanks
  if (thisDay.getDay() > 0) {
    for (i = 6; i > thisDay.getDay(); i--)
      html += TD + "&nbsp;" + xTD;
  }
  html += xTR;

  // Add a button to allow the user to easily return to today, or close the calendar
  var today = new Date();
  var todayString = "Today is " + dayArrayMed[today.getDay()] + ", " +
                     monthArrayMed[ today.getMonth()] + " " + today.getDate();
  html += TR_todaybutton + TD_todaybutton;
  html +=
"<button class='dpTodayButton' onClick='refreshDatePicker("" + dateFieldName + "");'>Today</button> ";
  html +=
    "<button class='dpTodayButton' onClick='updateDateField("" + dateFieldName + "");'>Close</button>";
  html += xTD + xTR;

  // Finally, close the table
  html += xTABLE;

  document.getElementById(datePickerDivID).innerHTML = html;
  // add an "iFrame shim" to allow the datepicker to display above selection lists
  adjustiFrame();
}

function getButtonCode(dateFieldName, dateVal, adjust, label) {
  var newMonth = (dateVal.getMonth () + adjust) % 12;
  var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
  if (newMonth < 0) {
    newMonth += 12;
    newYear += -1;
  }

  return "<button class='dpButton' onClick='refreshDatePicker("" + dateFieldName + "", " +
         newYear + ", " + newMonth + ");'>" + label + "</button>";
}

function getDateString(dateVal) {
  var dayString = "00" + dateVal.getDate();
  var monthString = "00" + (dateVal.getMonth()+1);
  dayString = dayString.substring(dayString.length - 2);
  monthString = monthString.substring(monthString.length - 2);

  switch (dateFormat) {
    case "dmy" :
      return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();
    case "ymd" :
      return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
    case "mdy" :
    default :
      return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();
  }
}

function getFieldDate(dateString) {
  var dateVal;
  var dArray;
  var d, m, y;

  try {
    dArray = splitDateString(dateString);
    if (dArray) {
      switch (dateFormat) {
        case "dmy" :
          d = parseInt(dArray[0], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
        case "ymd" :
          d = parseInt(dArray[2], 10);
          m = parseInt(dArray[1], 10) - 1;
          y = parseInt(dArray[0], 10);
          break;
        case "mdy" :
        default :
          d = parseInt(dArray[1], 10);
          m = parseInt(dArray[0], 10) - 1;
          y = parseInt(dArray[2], 10);
          break;
      }
      dateVal = new Date(y, m, d);
    }
    else if (dateString) {
      dateVal = new Date(dateString);
    }
    else {
      dateVal = new Date();
    }
  } catch(e) {
    dateVal = new Date();
  }

  return dateVal;
}

function splitDateString(dateString) {
  var dArray;
  if (dateString.indexOf("/") >= 0)
    dArray = dateString.split("/");
  else if (dateString.indexOf(".") >= 0)
    dArray = dateString.split(".");
  else if (dateString.indexOf("-") >= 0)
    dArray = dateString.split("-");
  else if (dateString.indexOf("") >= 0)
    dArray = dateString.split("");
  else
    dArray = false;
  return dArray;
}

/** Warning function, if wanted
function datePickerClosed(dateField) {
  var dateObj = getFieldDate(dateField.value);
  var today = new Date();
  today = new Date(today.getFullYear(), today.getMonth(), today.getDate());

  if (dateField.name == "StartDate") {
    if (dateObj < today) {
      // If the date is before today, alert the user and display the datepicker again
      alert("Please enter a date that is today or later");
      dateField.value = "";
      document.getElementById(datePickerDivID).style.visibility = "visible";
      adjustiFrame();
    } else {
      // If the date is okay, set the EndDate field to 7 days after the StartDate
      dateObj.setTime(dateObj.getTime() + (7 * 24 * 60 * 60 * 1000));
      var endDateField = document.getElementsByName ("EndDate").item(0);
      endDateField.value = getDateString(dateObj);
    }
  }
}
*/

function updateDateField(dateFieldName, dateString) {
  var targetDateField = document.getElementsByName (dateFieldName).item(0);
  if (dateString) targetDateField.value = dateString;

  var pickerDiv = document.getElementById(datePickerDivID);
  pickerDiv.style.visibility = "hidden";
  pickerDiv.style.display = "none";

  adjustiFrame();
  targetDateField.focus();

  /** Enable check on closing, if desired.
  if ((dateString) && (typeof(datePickerClosed) == "function"))
    datePickerClosed(targetDateField);
  */
}

/**
Use an "iFrame shim" to deal with problems where the datepicker shows up behind
selection list elements, if they're below the datepicker. The problem and solution are
described at:

   http://dotnetjunkies.com/WebLog/jking/archive/2003/07/21/488.aspx
   http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx
*/
function adjustiFrame(pickerDiv, iFrameDiv) {
  // Opera doesn't like something about this, so if we
  // think we're using Opera, don't even try
  var is_opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
  if (is_opera) return;

  // Put a try/catch block around the whole thing, just in case
  try {
    if (!document.getElementById(iFrameDivID)) {
      // Don't use innerHTML to update the body because it can cause global variables'
      // that are currently pointing to objects on the page to have bad references
      // document.body.innerHTML += "<iframe id='" +
      //    iFrameDivID + "' src='javascript:false;' scrolling='no' frameborder='0'>";
      var newNode = document.createElement("iFrame");
      newNode.setAttribute("id", iFrameDivID);
      newNode.setAttribute("src", "javascript:false;");
      newNode.setAttribute("scrolling", "no");
      newNode.setAttribute ("frameborder", "0");
      document.body.appendChild(newNode);
    }

    if (!pickerDiv)
      pickerDiv = document.getElementById(datePickerDivID);
    if (!iFrameDiv)
      iFrameDiv = document.getElementById(iFrameDivID);

    try {
      iFrameDiv.style.position = "absolute";
      iFrameDiv.style.width = pickerDiv.offsetWidth;
      iFrameDiv.style.height = pickerDiv.offsetHeight;
      iFrameDiv.style.top = pickerDiv.style.top;
      iFrameDiv.style.left = pickerDiv.style.left;
      iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1;
      iFrameDiv.style.visibility = pickerDiv.style.visibility;
      iFrameDiv.style.display = pickerDiv.style.display;
    } catch(e) { }
  } catch (ee) {
  }
}

<!-- Begin

// Compare two options within a list by VALUES
function compareOptionValues(a, b) {
  // Radix 10: for numeric values
  // Radix 36: for alphanumeric values
  var sA = parseInt( a.value, 36 );
  var sB = parseInt( b.value, 36 );
  return sA - sB;
}

// Compare two options within a list by TEXT
function compareOptionText(a, b) {
  var sA = parseInt( a.text, 36 );
  var sB = parseInt( b.text, 36 );
  return sA - sB;
}

// Dual list move function
function moveDualList(srcList, destList, addTo, deleteFrom) {
    // Do nothing if nothing is selected
    if (srcList.selectedIndex < 0) return;

    // Add to the destination list
    if (addTo == true) {
	newDestList = new Array(destList.options.length);
	var len = 0;
	for(len = 0; len < destList.options.length; len++) {
	    if (destList.options[len] != null) {
		newDestList[len] =
		    new Option(destList.options[len].text,
			       destList.options[len].value,
			       destList.options[len].defaultSelected,
			       destList.options[len].selected);
	    }
	}

	for(var i = 0; i < srcList.options.length; i++) {
	    if (srcList.options[i] != null && (srcList.options[i].selected == true)) {

		   // Incorporate into new list
		   newDestList[len] =
		       new Option(srcList.options[i].text,
			          srcList.options[i].value,
			          srcList.options[i].defaultSelected,
			          srcList.options[i].selected);
		   len++;
           }
        }

	// Sort out the new destination list
	newDestList.sort(compareOptionValues);   // BY VALUES
	//newDestList.sort(compareOptionText);   // BY TEXT

	// Populate the destination with the items from the new array
	for (var j = 0; j < newDestList.length; j++) {
	    if (newDestList[j] != null) {
		destList.options[j] = newDestList[j];
	    }
	}
    }

    // Erase from source list
    if (deleteFrom == true) {
	for(var i = srcList.options.length - 1; i >= 0; i--) {
	    if (srcList.options[i] != null && (srcList.options[i].selected == true)) {
		// Erase Source
		//srcList.options[i].value = "";
		//srcList.options[i].text  = "";
		srcList.options[i]       = null;
	    }
	}
    }
} // End of moveDualList()

//  End -->

</script>

<style>
body {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: .8em;
	}

/* the div that holds the date picker calendar */
.dpDiv {
       }

/* the table (within the div) that holds the date picker calendar */
.dpTable {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #505050;
	background-color: #ece9d8;
	border: 1px solid #AAAAAA;
	}

/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {
          color: black
      }

/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {
	   }

/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {
	 }

/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {
	         }

/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {
	border: 1px solid #ece9d8;
	}
/* a table cell that holds a highlighted day (usually either today's'
   date or the current date field value) */
.dpDayHighlightTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	}

/* the date number table cell that the mouse pointer is currently
   over (you can use contrasting colors to make it apparent which cell
   is being hovered over) */
.dpTDHover {
	background-color: #aca998;
	border: 1px solid #888888;
	cursor: pointer;
	color: red;
	}

/* the table cell that holds the name of the month and the year */
.dpTitleTD {
	   }

/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {
	    }

/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {
	}

/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
	color: black;
	}

/* additional style information for the text that indicates the month and year */
.dpTitleText {
	font-size: 12px;
	color: #000080;
	font-weight: bold;
	}

/* additional style information for the cell that holds a highlighted day (usually either today''s date or the current date field value) */
.dpDayHighlight {
	color: 4060ff;
	font-weight: bold;
	}

/* the forward/backward buttons at the top */
.dpButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000080;
	background: #d8e8ff;
	font-weight: bold;
	padding: 0px;
	}

/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000080;
	background: #d8e8ff;
	font-weight: bold;
	}

    .errors {color: rgb(255, 0, 0); font-style: bold; font-size: 115%}
    .body  {background-color: rgb(225, 225, 225); }
    .bullets {background-color: rgb(225, 225, 225); }
    .raw {background-color: wheat; }
    .links {text-decoration: none; }
     h3 { color: black; font-style: italic; }
    .headers { font-style: italic; color: #000080; }
    .info { color: rgb(70, 80, 255); }

</style>



<h1>This is the visualization/GetDateRange.html template</h1>
<div><table><tr><td><B><div>form</div></B></td><td>:</td><td><div><form enctype="multipart/form-data" method="post"><table><tr><td>Start From:</td><td><input type="text" name="startdate"/></td></tr><tr><td></td><td>

<input  value="Calendar" type="button" onclick="displayDatePicker('startdate', this);"/></td></tr><tr><td>end at:</td><td>
<input type="text" name="enddate"/></td></tr><tr><td></td><td>
<input value="Calendar" type="button" onclick="displayDatePicker('enddate', this);" /></td></tr><tr><td></td><td><input value="submit" type="submit"/></td></tr></table><input value="16694093104" type="hidden" name="_form_key"/></form></div></td></tr><tr><td><B><div>vars</div></B></td><td>:</td><td><div><table></table></div></td></tr></table></div>



      </div>
    </div>
    <div id="footer" class="fixed">
      &copy; 2007, Gluon Web Framework created by Massimo Di Pierro
    </div>
  </div>
</div>
</body>
</html>
